<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
    .divider {
        border: 1px solid #E6E6E6;
    }
    
    .avatar {
        border-radius: 20px;
        width: 40px;
        height: 40px;
    }
    
    .study-detail {
        .title {
            font-family: PingFangSC-Medium;
            font-size: 16px;
            color: #333333;
            letter-spacing: 0;
            text-align: justify;
            font-weight: bold;
        }
        .header {
            // margin-top: 15px;
            padding: 10px 15px 0 15px;
            background: white;
            .personal-info {
                padding: 10px 0 10px 0;
                img {
                    border-radius: 20px;
                }
                .nick {
                    font-size: 14px;
                    color: #333333;
                    letter-spacing: 0;
                }
                .star {
                    font-size: 11px;
                    color: #999999;
                    letter-spacing: 0;
                }
                .date {
                    font-size: 11px;
                    color: #999999;
                    letter-spacing: 0;
                    span {
                        line-height: 44px;
                    }
                }
            }
        }
        .detail {
            .demand {
                padding: 0 15px 10px 15px;
                margin-top: 10px;
                background: white;
                .title {
                    text-align: left;
                    padding: 10px 0;
                }
                .info {
                    text-align: left;
                    color: #999999;
                }
            }
            .introduction {
                padding: 0 15px;
                margin-top: 3px;
                background: white;
                .title {
                    text-align: left;
                    padding: 10px 0;
                }
                .content {
                    text-align: left;
                    padding: 0 0 10px 0;
                }
            }
        }
    }
</style>

<template>
    <div class="study-detail">
        <div class="header">
            <div class="title">{{studyDetail.title}}</div>
            <div class="personal-info flex flex-pack-justify">
                <div style="display:flex" class="name">
                    <div><span><img width="40px" height="40px" src='http://pic5.58cdn.com.cn/zhuanzh/n_v1bkuyfvltjuifpjbky4aq.jpg'/></span></div>
                    <div style="text-align:left;margin-left:5px;">
                        <span class="nick">{{studyDetail.nickName}}</span><br>
                        <span class="star">{{studyDetail.constellation}} {{studyDetail.grade}}</span>
                    </div>
                </div>
                <div class="date">
                    <span>{{studyDetail.publishingTime}}</span>
                </div>
            </div>
        </div>
        <div class="detail">
            <div class="demand">
                <div class="title">组队要求</div>
                <div class="info">时间：{{studyDetail.activityTime}}</div>
                <div class="info">地点：{{studyDetail.activityPlace}}</div>
                <div class="info">人数：{{studyDetail.joinPeopleNumber}}/{{studyDetail.peopleNumber}}</div>
            </div>
            <div class="introduction">
                <div class="title">组队介绍</div>
                <div class="content">
                    <span>{{studyDetail.description}}</span>
                </div>
            </div>
        </div>
         <comment_list :commentList="studyDetail.commentList"></comment_list>
    </div>
</template>

<script>
    import util from '@/libs/util'
    import comment_list from '../../components/comment_list.vue'
    export default {
        name: 'study-detail',
        components: {
         comment_list
        },
        data() {
            return {
                msg: '',
                id: 0,
                studyDetail: {}
            }
        },
        mounted() {
            this.id = this.$route.query.id;
            this.$http.get('api/share/getActivity?id='+this.id).then((res) => {
            //this.$http.get('static/activity.json').then((res) => {
                let data = res.data;
                if (data.statusCode == '600') {
                    this.studyDetail = data.content;
                    this.studyDetail.activityTime = util.fmtDate(this.studyDetail.activityTime);
                    this.studyDetail.publishingTime = util.fmtDate(this.studyDetail.publishingTime);
                }
            })
        }
    }
</script>

